<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    canvas{
            /* height: 100vh; */
        height: auto;
        min-height: 100%;
        /* width: 100%; */
        object-fit: cover;
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }
</style>
<body>
    <video style="visibility:hidden" id="video" src="https://video.huafang.com/sv/24afe855-184c26bb8d1/24afe855-184c26bb8d1.mp4" autoplay="true" preload="auto" loop="true" muted="false"></video>
    <canvas style="height:100%;width:100%"></canvas>
</body>
<script>
    /*
 * @Author: Summer
 * @LastEditors: Summer
 * @Description: 
 * @Date: 2022-04-20 14:12:58 +0800
 * @LastEditTime: 2022-04-20 15:41:17 +0800
 * @FilePath: \test\index.js
 */
(function(){
    
 
    window.Video2Canvas = class Video2Canvas {
     
        static PLAY_STATUC = { PLAY: 1, PAUSE: 0 }
     
        constructor(video, canvas) {
            this.statuc = Video2Canvas.PLAY_STATUC.PAUSE;
            this.video = video;
            if(!(this.canvas = canvas)) {
                this.canvas = document.createElement("canvas");
                this.canvas.width = video.videoWidth,
                this.canvas.height = video.videoHeight,
                this.canvas.className = video.className; 
                video.style.display = "none"
                video.parentNode.appendChild(this.canvas);
            }
            this.c2d = this.canvas.getContext("2d");
            this.video.addEventListener("play", this.play.bind(this))
            this.video.addEventListener("pause", this.pause.bind(this))
        }
     
        render(){
            if(this.statuc == Video2Canvas.PLAY_STATUC.PLAY){
                this.c2d.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.c2d.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
                requestAnimationFrame(this.render.bind(this))
            }
        }
     
        play(){
            console.log("播放")
            if(this.video.paused) this.video.play();
            this.statuc = Video2Canvas.PLAY_STATUC.PLAY;
            this.render();
            return this;
        }
     
        pause(){
            console.log("暂停")
            if(this.video.played) this.video.pause();
            this.statuc = Video2Canvas.PLAY_STATUC.PAUSE;
            return this;
        }
    }
    })()

// 使用方法：1
var video = document.querySelector("video") // 获取到视频标签
// 实例化 Canvas 对象并播放，该操作会自动创建一个 Canvas 标签放到 video 标签同级并隐鲹原有的 video 标签
var v2c = new Video2Canvas(video).play(); 
 
// 使用方法：2
var video = document.querySelector("video") // 获取到视频标签
var canvas = document.querySelector("canvas") // 获取到自己准备好的canvas标签
// 实例化 Canvas 对象并播放
var v2c = new Video2Canvas(video, canvas).play();

</script>
</html>